{template 'include/header'}
<link rel="stylesheet" type="text/css" href="<?php echo MODULE_URL;?>template/mobile/css/yqj_create.min.css">
<style type="text/css">
    .page-call .cover{overflow: hidden;}
    .page-landscape{width:100%; height:100%; background:#333;position: fixed; left:0; right:0; top: 0; bottom:0;z-index:9999999; display:none; text-align: center;}.page-landscape-box{position: relative; margin-left: auto; margin-right: auto; top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}.page-landscape span{font-size:16px;display:block;color:#FFFFFF; text-align:center;width: 100%;padding-top: 40px; line-height:2;}.page-landscape img{-webkit-animation: page-landscapeAni 1.2s ease infinite alternate;animation: page-landscapeAni 1.2s ease infinite alternate;}@-webkit-keyframes page-landscapeAni{0% {-webkit-transform:rotate(90deg);}30% {-webkit-transform:rotate(90deg);}70%{-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(0deg);}}@keyframes page-landscapeAni{0% {transform:rotate(90deg);}30% {transform:rotate(90deg);}70%{transform:rotate(0deg);}100% {transform:rotate(0deg);}}
    .btn1 {position:relative;box-sizing:border-box;font-weight:500;text-align:center;border-radius:.24rem;-webkit-tap-highlight-color:transparent;display:block;margin-left:auto;margin-right:auto;line-height:.48rem;}
    a:hover,a:focus {color:;text-decoration:blink;}
    .mask{width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0,0,0,.7);z-index: 99;}
    #close{font-size: 20px;position: absolute;right: 10px;top: 0;color: #000;}
    .viewMore{width: 100%;height: 80%;position: fixed;left: 0;bottom: -1000px;background-color: #fff;transition: all 0.5s;overflow-y: auto;z-index: 101}
    .viewMore h1{font-size: 18px;line-height: 16px;padding: 10px 15px;margin: 0;position: relative}
    .viewMore h1::before{content: "";width: 3px;height:20px;background-color: #df2413;position: absolute;left: 0;top: 50%;margin-top: -10px;}
    /*详情强制样式*/
    .proj{font-size:12px !important;padding: 15px;}
    .proj p {width: 100%!important;}
    .proj img{ width:100% !important;}
    .proj div{width: 100% !important;height: auto !important}
    .infoOne{}
    .infoOne .spanImg{width: 100%;padding-top:50%;position: relative;display: block;background-size: cover;background-position: 50% 0;background-color: #eee;border-radius: 3x;}
</style>

<div id="pageContainer">
    <div class="page page_h page-call">
        <div class="g-box call-head">
            <div class="infoOne" id="topBg">
                <span id="bgpic" class="spanImg" style='display: block; background-image: url("<?php echo MODULE_URL;?>template/mobile/img/1899_yqj_o_bg4.jpg");'></span>
                <input type="hidden" id="bgpicBase64">
            </div>
            <div class="main">
                <div class="avatar">
                    <img id="teamhPic" class="avatar-pic j-avatarPic" src="<?php echo MODULE_URL;?>template/mobile/img/yqj_c_head.png">

                </div>
                <h4 class="invite-user">{$users['mem_name']}</h4>
                <h3>邀您一起献爱心</h3>
                <p class="mrg_t2">爱心人士代表&nbsp;发起</p>
                <div class="invite-desc">
                    <p>“{$kouhao}”</p>
                </div>
                <div class="target j-target">
                    <span class="clr_dft">一起捐已筹&nbsp;{if !empty($gift_jk_query['sum'])}{$gift_jk_query['sum']}{else}0{/if}&nbsp;元</span>&nbsp;&nbsp;
                    <span style="color:#dee4e8">|</span>&nbsp;&nbsp;
                    {if $goal=="不设目标"}
                        <b>目标不限</b>
                    {else}
                        <b>目标&nbsp;{$goal}&nbsp;元</b>
                    {/if}
                </div>
                {if $goal != "不设目标"}
                <div class="mod-progressbar-wrap j-progressbar">
                    <div class="mod-progressbar">
                        <div class="mod-progressbar-done j-progress_done show" style="width:597%;"></div>
                    </div>
                    <div class="fnt-dinc">&nbsp;597%</div>
                </div>
                {/if}
            </div>
            <!--如果是自己就显示，去编辑-->
            <div class="call-head-bar">
            
            <?php 
                if($mem_id == $other_id){
                    $url = $this->createMobileUrl("invite",array("pro_id"=>$pro_id));
                    echo "<a href='".$url."' class='call-head-opr j-edit-yqj'>
                        <svg class='icon icon_wt'><use xlink:href='#icon-edit'><svg viewBox='0 0 48 48' id='icon-edit' fill-rule='evenodd' width='100%' height='100%'><path d='M24,6v4H10v28h28V24h4v14c0,2.2-1.8,4-4,4H10c-2.2,0-4-1.8-4-4V10c0-2.2,1.8-4,4-4H24z'></path><polygon points='37.8,9 40.7,11.8 27.9,24.6 24.4,25.3 25.1,21.7'></polygon></svg></use></svg>
                    </a>";
                }
            ;?>
                <!-- <a href="<?php echo $this->createMobileUrl("invite",array("pro_id"=>$pro_id));?>" class="call-head-opr j-edit-yqj">
                    <svg class="icon icon_wt"><use xlink:href="#icon-edit"><svg viewBox="0 0 48 48" id="icon-edit" fill-rule="evenodd" width="100%" height="100%"><path d="M24,6v4H10v28h28V24h4v14c0,2.2-1.8,4-4,4H10c-2.2,0-4-1.8-4-4V10c0-2.2,1.8-4,4-4H24z"></path><polygon points="37.8,9 40.7,11.8 27.9,24.6 24.4,25.3 25.1,21.7"></polygon></svg></use></svg>
                </a> -->
            </div>
            <div class="septitle">
                <span class="septitle-txt">帮助公益项目</span></div>
            <div class="g-flex_fs">
                <div class="g-flex-hd">
                    <div class="projcover">
                        <img class="projcover-pic" src="{$_W['attachurl']}{$project['pro_feature']}"></div>
                </div>
                <div class="g-flex-m">
                    <h4 class="fnt-title">{$project['pro_name']}</h4>
                    <p class="proj-desc">{$project['pro_short']}</p>
                    <!--                    <div class="mrg_t1 hm">善款接收 :<a href="">慈善协会</a></div>-->
                </div>
            </div>
            <div class="proj-viewmore">
                <a href="javascript:;" id="proj-detail" class="btn_m btn_holl_lt j-proj-detail-open" data-loaded="no" onclick="">阅读更多</a>
            </div>
        </div>

        <div class="g-box friends_wrap">
            <div class="g-box-title">
                <h3>{if !empty($count_user) }{$count_user}{else}0{/if}位爱心好友参与</h3>
            </div>
            <ul class="comment-list">
            
                <!-- <li class="comment" tradeno="1452584502201905290700001436" id="1452584502201905290700001436" isinoneday="0" msgid="" no="6" cnum="" lastrk="">
                    <div class="g-flex_fs">
                        <div class="g-flex-hd">
                            <a href="javascript:;" style="display:inline-block">
                                <div class="avatar">
                                    <img class="avatar-pic" src="http://mat1.gtimg.com/gongyi/m/wx/yqj/yqj_icon_head.jpg">
                                    <div class="avatar-level" style="display:none">Lv.0</div></div>
                            </a>
                        </div>
                        <div class="g-flex-m">
                            <h4 class="comment-name">{php print_r($list);}</h4>
                            <p class="mrg_t1"></p>
                            <div class="hm">05-29</div></div>
                        <div class="g-flex-ft">
                            <div class="hm">捐出
                                <span class="fnt-dinc h5 clr_dk">1</span>元</div></div>
                    </div>
                    <div class="mod-comment-reply" id="memoList" style="display:none"></div>
                </li> -->
            {loop $list $item}
                <li class="comment" tradeno="1452584502201905284500005728" id="1452584502201905284500005728" isinoneday="0" msgid="292157121171" no="1" cnum="" lastrk="">
                    <div class="g-flex_fs">
                        <div class="g-flex-hd">
                            <a href="//ssl.gongyi.qq.com/user_center/index.html?gt=yqjdt&amp;share_from=wx&amp;ADTAG=uc_yqj&amp;share_at=1559613682669&amp;third_id=68287B38C231D41DEE090AF4BDBC769CA1583F96E31849476A8CDD70E7E7D1C5" style="display:inline-block">
                                <div class="avatar">
                                    <img class="avatar-pic" src="{$item['mem_photo']}">
                                    <div class="avatar-level" style="display:none">Lv.0</div></div>
                            </a>
                        </div>
                        <div class="g-flex-m">
                            <h4 class="comment-name">{$item['mem_name']}</h4>
                            <p class="mrg_t1">{$item['comment_cont']}</p>
                            <div class="hm">{$item['fund_time']}</div></div>
                        <div class="g-flex-ft">
                            <div class="hm">捐出
                                <span class="fnt-dinc h5 clr_dk">{$item['sum']}</span>元</div></div>
                    </div>
                    <div class="mod-comment-reply" id="memoList" style="display:none"></div>
                </li>
            {/loop}
            </ul>
        </div>


        <div class="mod-footbar" id="BtnArea">
            <div onclick="">
                <a href="<?php echo $this->createMobileUrl("invite",array("pro_id"=>$pro_id,"gift_id"=>$gift_id));?>" class="btn1 btn_holl_lt" id="btn_submit">邀请朋友参与</a>
            </div>
            <?php if (time()>$project['starttime'] && time()<$project['endtime']) {?>
            <?php if (empty($_W['fans']['follow']) && $set['is_follow']==true) {?>
            <div onclick="">
                <a href="javascript:;" class="btn1 btn_fill" id="guanz">请点击关注并捐款</a>
            </div>
            <?php}else{?>
            <div onclick="">
                <a href="javascript:;" class="btn1 btn_fill" id="ljjk">立即捐款</a>
            </div>
            <?php}?>
            <?php}elseif(time()<$project['starttime']){?>
            <div>
                <a href="javascript:;" class="btn1 btn_fill">捐款未开始</a>
            </div>
            <?php}else{?>
            <div>
                <a href="javascript:;" class="btn1 btn_fill">捐款已结束</a>
            </div>
            <?php}?>
        </div>
    </div>

    <!--金额弹窗-->
    <div class="jetc" id="day-donate" style="border-top:#ececec 1px solid; padding:10px 15px !important;z-index:1001;">
        <div class="float_l">
            <div class="input_2 input_val5"  style="position:relative;"><span class="font_2"><?php if($set['cash1']){echo $set['cash1'];}else{echo '5';} ?></span>元
                <div style="position:absolute; right:0; bottom:0;" class="arrow-left"></div>
                <div class="gou_b"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
            </div>
        </div>
        <div class="float_l">
            <div class="input_2 input_val10"  style="position:relative;"><span class="font_2"><?php if($set['cash2']){echo $set['cash2'];}else{echo '10';} ?></span>元
                <div style="position:absolute; right:0; bottom:0;" class="arrow-left"></div>
                <div class="gou_b"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
            </div>
        </div>
        <div class="float_l">
            <div class="input_2 input_val50"  style="position:relative;"><span class="font_2"><?php if($set['cash3']){echo $set['cash3'];}else{echo '50';} ?></span>元
                <div style="position:absolute; right:0; bottom:0;" class="arrow-left"></div>
                <div class="gou_b"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
            </div>
        </div>
        <div class="float_l">
            <div class="input_2 input_val100"  style="position:relative;"><span class="font_2"><?php if($set['cash4']){echo $set['cash4'];}else{echo '100';} ?></span>元
                <div style="position:absolute; right:0; bottom:0;" class="arrow-left"></div>
                <div class="gou_b"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></div>
            </div>
        </div>

        <div class="float_l" style="width:100%;">
            <div class="input_1" style="position:relative;">
                <input name="price" value="" size="6" class="price_input input_2 font_3" placeholder="输入金额，爱心无价" style="width:90%; padding:7px 30px 7px 10px; font-size:14px; color:#fe6903; "/>
                <span style="display:inline-block; margin-left:-30px;font-size:12px; color:#939393;">元</span>
            </div>

            <a href="javascript:void(0)" id="price">
                <span style="float:right;color:#fff; display:none;background:#fe6903 !important;">立即捐助<i class="glyphicon glyphicon-chevron-right"></i></span>
            </a>
        </div>
        <label style="display:none;" id="jine"></label>
        <div class="clear"></div>
        <a href="###" id="jk_btn" >
            <div class="btn btn-danger  btn-block" style="background:#df2413; border-color:#df2413; color:#fff;">立即捐款</div>
        </a>
        <div class="has-success i_d_14">
            <div class="radio">
                <label>
                    <input type="radio" id="checkboxSuccess" value="option1"  checked style=" margin-top:2px;">
                    同意并接受<a href="{php echo $this->createMobileUrl('agree')}">{$set['gy_agree_name']}</a>
                </label>
            </div>
        </div>
    </div>

    <!--遮蔽层-->
    <div class="mask" style="display: none"></div>
    <!--阅读更多-->

    <div class="viewMore" style="display: none">
        <div id="close">×</div>
        <div class="g-flex_fs">
            <div class="g-flex-hd">
                <div class="projcover">
                    <img class="projcover-pic" src="{$_W['attachurl']}{$project['pro_feature']}">
                </div>
            </div>
            <div class="g-flex-m">
                <h4 class="fnt-title">{$project['pro_name']}</h4>
                <p class="proj-desc">{$project['pro_short']}</p>
            </div>
        </div>
        <h1>项目详情</h1>
        <div class="proj" style="">
            <?php echo html_entity_decode($project['pro_content']);?>
        </div>
    </div>

</div>

<script src="<?php echo MODULE_URL;?>template/mobile/js/tools.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<!--底部logo和版权-->
{php echo register_jssdk(false);}

<script type="text/javascript">
    $("#btn_edit").click(function(){

    });
    $("#btn_edit").click(function(){

    });

    $("#proj-detail").click(function () {
        $(".mask").show();
        $(".viewMore").show();
        $(".viewMore").css("bottom","0");
        $(".mask,#close").click(function () {
            $(".viewMore").css("bottom","-1000px");
            setTimeout(function () {
                $(".mask").hide();
                $(".viewMore").hide();
            },400)

        });
    });

    initShare();
    function initShare(){
        wx.ready(function () {
            sharedata = {
                title: "{$project['pro_name']}",
                desc: "{php echo trim($kouhao);}",
                link: "{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('share', array('pro_id'=>$project['pro_id'], 'mem_id'=>$user['mem_id'],'goal'=>$goal,'kouhao'=>$kouhao));}",
                imgUrl: "{$_W['attachurl']}{$project['pro_feature']}",
                success: function(){

                },
                cancel: function(){
                    //alert("分享失败，可能是网络问题，一会儿再试试？");
                }
            };
            wx.onMenuShareAppMessage(sharedata);
            wx.onMenuShareTimeline(sharedata);
        });
    }


    //上传图片预览和压缩
    $("#topImgUpFile").one("click",function () {
        var topImgUpFile=document.getElementById("topImgUpFile");//点击上传id
        var bgpic=$("#bgpic");   //预览图片存放id
        var bgpicBase64=$("#bgpicBase64");  //存放base64给后台
        upFile(topImgUpFile,bgpic,bgpicBase64,false);
    });
    $("#upLogo").one("click",function () {
        var upLogo=document.getElementById("upLogo");//点击上传id
        var teamhPic=$("#teamhPic");   //预览图片存放id
        var teamhPicBase64=$("#teamhPicBase64");  //存放base64给后台
        upFile(upLogo,teamhPic,teamhPicBase64,true);
    });

    function upFile(_upFile,imgId,inputBase64,bl){
        _upFile.addEventListener("change",function(){
            if (_upFile.files.length === 0) {
                alert("请选择图片");
                return; }
            var oFile = _upFile.files[0];
            //if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
            //  if(oFile.size>15*1024*1024){
            //     alert("照片上传：文件不能超过15MB!请使用容量更小的照片。")
            //     return;
            //  }
            if(!new RegExp("(jpg|jpeg|png)+","gi").test(oFile.type)){
                alert("照片上传：文件类型必须是JPG、JPEG、PNG");
                return;
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                var base64Img= e.target.result;
                //压缩前预览
                //$("#preview").attr("src",base64Img);
                //--执行resize。
                var _ir=ImageResizer({
                    resizeMode:"auto"
                    ,dataSource:base64Img
                    ,dataSourceType:"base64"
                    ,maxWidth:1200 //允许的最大宽度
                    ,maxHeight:600 //允许的最大高度。
                    ,onTmpImgGenerate:function(img){

                    }
                    ,success:function(resizeImgBase64,canvas){
                        //压缩后预览
                        if(bl){
                            imgId.attr("src",resizeImgBase64);
                        }else {
                            imgId.css("background-image","url("+resizeImgBase64+")");
                        }
                        inputBase64.val(resizeImgBase64.substr(22));
                        //赋值到隐藏域传给后台
                        // $('#upTo').on('click',function(){
                        //     //alert('传给后台base64文件数据为：'+resizeImgBase64.substr(22));
                        //     $.ajax({
                        //         url:'server.php',
                        //         type:'POST',
                        //         dataType:'json',
                        //         data:{
                        //             imgOne:resizeImgBase64.substr(22)
                        //         },
                        //         success:function(data){
                        //             alert(data.msg);
                        //         }
                        //     });
                        // });
                    }
                    ,debug:true
                });
            };
            reader.readAsDataURL(oFile);
        },false);
    }
</script>
<script type="text/javascript">
    $("#price").click(
        function(){
            var  price = $('.price_input').val();
            window.location.href = "{php echo $this->createMobileUrl('donate',array('pro_id'=>$project['pro_id']));}&price="+price;
        });
</script>
<script>
    //捐款弹窗
    $("#ljjk").click(
        function(){
                alert("慈善超市还没开放！");
                // $("#day-donate").show();
                // $(".mask").show();
                // $.ajax({
                //     url: "{php echo $this->createMobileUrl('together')}",
                //     type: 'post',
                //     dataType: 'json',
                //     data: {other_id: "{$mem_id}",pro_id:"{$project['pro_id']}"},
                //     success:function(){

                //     }
                // })
                
            }
    );
    $("#wyyj").click(
        function(){
            $("#month-donate").show();
            $(".mask").show();
        }
    );
    $("#yao_btn").click(
        function(){
            $(".chuandi").show();
            $(".mask").show();
        }
    );
    $("#guanz").click(
        function(){
            window.location.href = "{$set['follow_url']}";
        }
    );
    $(".mask").click(
        function(){
            $(".jetc").hide();
            $(".mask").hide();
            $('.price_input').val("");
        }
    );
    $(".input_2").click(
        function(){
            $(".input_2").css("border-color","#ccc");
            $(".input_2").css("border-width","1px");
            $(this).css("border-color","#fe6903");
            $(this).css("border-width","2px");
            $(".input_2").find(".arrow-left").hide();
            $(".input_2").find(".gou_b").hide();
            $(this).find(".arrow-left").show();
            $(this).find(".gou_b").show();
            $("#price_input").val("");
        }
    );
    $(".input_val5").click(
        function(){
            $(".price_input").val($(this).find('.font_2').html());
        }
    );
    $(".input_val10").click(
        function(){
            $(".price_input").val($(this).find('.font_2').html());
        }
    );
    $(".input_val50").click(
        function(){
            $(".price_input").val($(this).find('.font_2').html());
        }
    );
    $(".input_val100").click(
        function(){
            $(".price_input").val($(this).find('.font_2').html());
        }
    );
    $("#jk_btn").click(
        function(){
            if(parseFloat($(".price_input").val())>0){
                $("#price").click();
            } else {
                alert("还是捐点吧，爱心无价！");
            }
        }
    );
    $("#yj_btn").click(
        function(){
            if(parseFloat($("#price-input").val())>0){
                var  price = $('#price-input').val();
                window.location.href = "{php echo $this->createMobileUrl('donate',array('pro_id'=>$project['pro_id']));}&ch=month&price="+price;
            } else {
                alert("还是捐点吧，爱心无价！");
            }
        }
    );
</script>
</body>
</html>